<template>
    <div id="main" style="height: 500px; width: 100%;">

    </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";

export default {
    name: "PieChart",
    data() {
        return {
            title: '',
            chartType: '',
            option: {
                title: {
                    text: this.title,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'horizontal',
                    top: 'top'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
        }
    },
    mounted() {
        this.chartType = this.$route.query.type;
        this.title = this.$route.query.title;
        this.chartQuery()
    },
    methods: {
        chartQuery() {
            let chartType = this.chartType;
            axios.get(`http://152.136.191.171:9243/job/proportion/${chartType}`).then(resp => {
                let chartDom = document.getElementById('main');
                let myChart = echarts.init(chartDom);
                let cityData = resp.data.data;
                this.option.series[0].data = Object.keys(cityData).map(key => ({name: key, value: cityData[key]}));
                myChart.setOption(this.option);
            })
        }
    }
}
</script>

<style scoped>

</style>